import { children, type JSX } from "solid-js";
import { type ClassValue, cn } from "@/common/cn";
import theme from "@/common/theme";

type PanelProps = {
  title?: JSX.Element;
  children?: JSX.Element | undefined;
  class?: ClassValue;
  style?: JSX.CSSProperties | string | undefined;
  titleClass?: ClassValue;
  titleStyle?: JSX.CSSProperties | string | undefined;
  bodyClass?: ClassValue;
  bodyStyle?: JSX.CSSProperties | string | undefined;
};

/**
 * 嵌套组件示例
 */
export default function Panel(p: PanelProps) {
  const cTitle = children(() => p.title);
  const cChildren = children(() => p.children);

  return (
    <div class={cn("border", [theme.borderRadius, theme.borderColor, theme.shadow], p.class)} style={p.style}>
      {p.title && (
        <div
          class={cn(
            "border-b px-4 py-2 h-12 flex items-center",
            [theme.borderColor, theme.borderTopRadius],
            p.titleClass,
          )}
          style={p.titleStyle}
        >
          {cTitle()}
        </div>
      )}
      <div class={cn("px-4 py-2", theme.borderBottomRadius, p.bodyClass)} style={p.bodyStyle}>
        {cChildren()}
      </div>
    </div>
  );
}
